<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>信访详情</title>
    <meta name="context-path" th:content="@{/}"/>
    <link rel="stylesheet" th:href="@{/resources/zui/css/zui.min.css}"/>
    <style type="text/css">
        .btn-link {
            font-size: 15px;
            font-weight: bold;
        }

        p {
            margin-top: 20px;
        }

        .with-padding {
            background: #DDF3F5;
        }

        table {
            width: 100%;
        }

        tr {
            line-height: 40px;
        }

        .title {
            text-align: right;
        }

        @media print {
            .noprint {
                display: none;
            }
        }
    </style>
</head>
<body>
<div id="accordion" class="container" style="margin:30px auto;">
    <button id="btnPrint" class="btn btn-primary" type="button">打印</button>
    <input type="hidden" name="id" id="id" th:value="${model.id}" />
    <div id="printContainer" class="container">
        <p>
            <a href="#collapseExample8" data-toggle="collapse" data-parent="#accordion" class="btn btn-link">举报人</a>
        </p>
        <div class="in" id="collapseExample8">
            <div class="bg-pale with-padding">
                <table>
                    <tr>
                        <td class="title" width="20%">身份证号：</td>
                        <td width="30%" th:text="${model.sfzh}"></td>
                        <td class="title" width="20%">姓名：</td>
                        <td width="30%" th:text="${model.realName}"></td>
                    </tr>
                    <tr>
                        <td class="title">手机号码：</td>
                        <td th:text="${model.phoneNumber}"></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>
        <p>
            <a href="#collapseExample9" data-toggle="collapse" data-parent="#accordion" class="btn btn-link">受理状态</a>
        </p>
        <div th:if="${model.acceptableStatus == 0}" class="in" id="collapseExample9">
            <div class="bg-pale with-padding">
                <table>
                    <tr>
                        <td class="title" width="20%">状态：</td>
                        <td width="30%">未受理</td>
                    </tr>
                </table>
            </div>
        </div>
        <div th:if="${model.acceptableStatus >= 1}" class="in" id="collapseExample9">
            <div class="bg-pale with-padding">
                <table>
                    <tr>
                        <td class="title" width="20%">状态：</td>
                        <td width="30%">已受理</td>
                        <td class="title" width="20%">受理时间：</td>
                        <td width="30%" th:text="${model.acceptanceTime}"></td>
                    </tr>
                    <tr>
                        <td class="title">受理人姓名：</td>
                        <td th:text="${model.assigneeName}"></td>
                        <td class="title">受理人身份证号：</td>
                        <td th:text="${model.assigneeSfzh}"></td>
                    </tr>
                </table>
            </div>
        </div>
        <div th:if="${model.acceptableStatus == 2}" class="in" id="collapseExample9">
            <div class="bg-pale with-padding">
                <table>
                    <tr>
                        <td class="title" width="140px">状态：</td>
                        <td>已处理</td>
                        <td class="title" width="140px">信访时间：</td>
                        <td th:text="${model.processingTime}"></td>
                    </tr>
                    <tr>
                        <td class="title">处理人身份证号：</td>
                        <td th:text="${model.dealerSfzh}"></td>
                        <td class="title">处理人姓名：</td>
                        <td th:text="${model.dealerName}"></td>
                    </tr>
                    <tr>
                        <td class="title">调查结果：</td>
                        <td th:text="${model.surveyResults}" colspan="3"></td>
                    </tr>
                    <tr>
                        <td class="title">处置结果：</td>
                        <td th:text="${model.disposalResult}" colspan="3"></td>
                    </tr>
                </table>
            </div>
        </div>
        <p>
            <a href="#collapseExample1" data-toggle="collapse" data-parent="#accordion" class="btn btn-link">文字</a>
        </p>
        <div class="in" id="collapseExample1">
            <div class="bg-pale with-padding">
                <p th:text="${model.content}"></p>
            </div>
        </div>
        <p>
            <a href="#collapseExample2" data-toggle="collapse" data-parent="#accordion"
               class="btn btn-link collapsed">图片</a>
        </p>
        <div class="in" id="collapseExample2">
            <div class="with-padding">
                <a th:if="${file.type == 1}" th:each="file : ${model.fileList}"
                   th:href="|/file/downloadImage?filename=${file.path}|"
                   data-toggle="lightbox"
                   data-group="image-group-1">
                    <img th:src="|/file/downloadImage?filename=${file.path}|" class="img-rounded"
                         style="width: 360px;height:210px;" alt="">
                </a>
            </div>
        </div>
        <p class="noprint">
            <a href="#collapseExample3" data-toggle="collapse" data-parent="#accordion"
               class="btn btn-link collapsed">音频</a>
        </p>
        <div class="in noprint" id="collapseExample3">
            <div class="with-padding">
                <audio th:src="|/file/downloadAudio?filename=${file.path}|" th:if="${file.type == 2}"
                       th:each="file : ${model.fileList}" controls="controls">
                </audio>
            </div>
        </div>
        <p class="noprint">
            <a href="#collapseExample4" data-toggle="collapse" data-parent="#accordion"
               class="btn btn-link collapsed">视频</a>
        </p>
        <div class="in noprint" id="collapseExample4">
            <div class="with-padding">
                <div id="video1" style="width:400px;height:300px;"
                     th:data-src="|/file/downloadFile?filename=${file.path}|" th:if="${file.type == 3}"
                     th:each="file : ${model.fileList}">
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/resources/matrix/js/jquery.min.js}"></script>
<script th:src="@{/resources/print/js/vendor/html5-3.6-respond-1.1.0.min.js}"></script>
<script th:src="@{/resources/zui/js/zui.min.js}"></script>
<script type="text/javascript" th:src="@{/resources/ckplayer/ckplayer.min.js}" charset="utf-8"></script>
<script th:src="@{/resources/print/js/jQuery.print.js}"></script>
<script th:src="@{/resources/js/system.js}"></script>
<script th:inline="text">
    $(function () {
        var vd = $("#video1");
        if (vd) {
            var videoObject = {
                container: '#video1',
                variable: 'player',
                video: $("#video1").attr("data-src")
            };
            var player = new ckplayer(videoObject);
        }

        $("#btnPrint").bind("click", function () {
            ajaxPost(contextRoot + "jwReport/doAcceptance", {id: $("#id").val()});
            $.print("#printContainer");
        });
    });
</script>
</body>
</html>